<template>
  <div :class="`nav-beadcrumb-${theme}`">
    <Breadcrumb>
      <BreadcrumbItem
        v-for="item in currentPath"
        :to="item.path"
        :key="item.name"
        >{{ itemTitle(item) }}</BreadcrumbItem
      >
    </Breadcrumb>
  </div>
</template>

<script>
export default {
  name: "breadcrumbNav",
  props: {
    currentPath: Array,
    theme: {
      type: String,
      default: "light",
    },
  },
  methods: {
    itemTitle(item) {
      if (typeof item.title == "object") {
        return this.$t(item.title.i18n);
      } else {
        return item.title;
      }
    },
  },
};
</script>


<style lang="less">
.nav-beadcrumb-darkblue {
  .ivu-breadcrumb a {
    color: hsla(0, 0%, 100%, 0.65);
  }
  .ivu-breadcrumb > span:last-child {
    color: hsla(0, 0%, 100%, 0.65);
  }
}

.nav-beadcrumb-primary, .nav-beadcrumb-black {
  .ivu-breadcrumb {
    color: #f0f0f0;
  }
  .ivu-breadcrumb a {
    color: #fff;
  }
  .ivu-breadcrumb > span:last-child {
    color: #fff;
  }
}
</style>
